<template>
    <header class="header">
      <!--匿名插槽-->
      <slot></slot>
    </header>
    <main class="main">
        <!-- 设置具名插槽 -->
        <slot name="main"></slot>
    </main>
    <footer class="footer">
        <slot :data="slotData"></slot>

        <slot name="footer"></slot>
    </footer>
  </template>
  
  <script setup lang='ts'>
        let slotData = '我是子组件中的数据'
  </script>
  <style scoped>
  
  .header {
      height: 200px;
      width: 100%;
      background-color: blueviolet;
  }
  
  .main {
    height: 400px;
      width: 100%;
    background-color: cadetblue;
  }
  
  .footer {
      height: 200px;
      width: 100%;
      background-color: burlywood;
  }
  
  
  </style>